<template>
    <my-dialog title="个人资料" :isShow="props.isShow" @close="emits('close')">
        <div>
            <el-row>
                <el-col :span="7">
                    <div class="photoBox">
                        <img :src="defaultImage" alt="">
                        <div>
                            <span>修改头像</span>
                        </div>
                    </div>
                </el-col>
                <el-col :span="17">
                    <el-row>
                        <el-col :span="4" :offset="1">
                            <span style="vertical-align: text-top">
                                <el-icon :size="16">
                                    <User />
                                </el-icon>
                                用户名:
                            </span>
                        </el-col>
                        <el-col :span="6" style="text-align: left;">admin</el-col>
                    </el-row>
                </el-col>
            </el-row>
        </div>
    </my-dialog>
</template>

<script setup>
import defaultImage from '@/assets/avatar.gif'
import { defineProps } from 'vue';
const props = defineProps(['isShow'])
const emits = defineEmits(['close'])
</script>

<style scoped lang="scss">
.photoBox {

    border-right: 1px dotted gray;

    img {
        height: 120px;
        border-radius: 50%;
    }
}
</style>
